<template>
	<view>
		<view class="wri-tag">
			热门作者
		</view>
		<view class="wri-list">
			<view class="wri-item" @click="naviTo(w.user_id)" v-for="(w, i) in WriterList" :key="w.user_id">
				<view class="wri-image">
					<image :src="w.web_url" mode="widthFix"></image>
				</view>
				<view class="wri-info">
					<view class="wri-name">{{w.user_name}}</view>
					<view class="wri-sum">{{w.summary}}</view>
				</view>
				<view class="wri-btn">
					关注
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const url = 'author/hot'
	
	export default {
		name:"WriterView",
		data() {
			return {
				WriterList: []
			};
		},
		created() {
			http(url).then(res => {
				this.WriterList = res.data
				console.log(this.WriterList);
			})
		},
		methods: {
			naviTo(id) {
				uni.navigateTo({
					url: '/pages/AuthorDetails/AuthorDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.wri-tag {
		padding: 5px 10px;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: 600;
	}
	
	.wri-item {
		padding: 0 10px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	
	.wri-image {
		flex: 1.5;
		
		image {
			width: 85%;
			border-radius: 999px;
		}
	}
	
	.wri-info {
		margin-left: 5px;
		flex: 7;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.wri-name {
			margin-bottom: 5px;
			font-size: 14px;
		}
		
		.wri-sum {
			font-size: 10px;
			color: #c1c1c1;
		}
	}
	
	.wri-btn {
		padding: 4px 0;
		flex: 1.5;
		font-size: 12px;
		text-align: center;
		border: 1px solid #8a8a8a;
		border-radius: 999px;
	}
</style>